<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>ehz-app</title>
	</head>
	<body>
		<div id="app">
			<div id="msg"></div>
			<div id="msg1"></div>
			<span onclick="cancel()" id="cancel">取消</span>
			<span onclick="">确定</span>
		</div>
		<!-- built files will be auto injected -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			var hostname = '47.104.83.107', //'192.168.1.2',
				port = 8083,
				clientId = 'Q73ZHO19X7',
				timeout = 5,
				keepAlive = 100,
				cleanSession = false,
				ssl = false,
				userName = 'test',  
				password = 'test1',  
				topic = '/helloMQTT';
			client = new Paho.MQTT.Client(hostname, port, clientId); //创建mqtt客户端
			//建立客户端实例  
			var options = {
				invocationContext: {
					host: hostname,
					port: port,
					path: client.path,
					clientId: clientId
				},
				timeout: timeout,
				keepAliveInterval: keepAlive,
				cleanSession: cleanSession,
				useSSL: ssl,
				userName: userName,  
				password: password,  
				onSuccess: onConnect,
				onFailure: function(e) {
					console.log(e);
				}
			};
			client.connect(options);
			//连接服务器并注册连接成功处理事件  
			function onConnect() {
				client.subscribe(topic);
			}

			client.onConnectionLost = onConnectionLost;

			//注册连接断开处理事件  
			client.onMessageArrived = onMessageArrived;

			//注册消息接收处理事件  
			function onConnectionLost(responseObject) {
				console.log(responseObject,12313132);
				if (responseObject.errorCode !== 0) {
					console.log("onConnectionLost:" + responseObject.errorMessage);
					console.log("连接已断开");
				}
			}

			function onMessageArrived(message) {
				console.log("收到消息:" + JSON.stringify(message), message);
				document.getElementById('msg').innerHTML = message.payloadString
			}
			
			function cancel(){
				document.getElementById('cancel').innerHTML = '您点击了取消'
				console.log('您点击了取消')
			}
		</script>
	</body>
</html>
